<template>
  <div class="CityList" ref="wrapper">
    <div class="cityRecords">
      <div class="title">定位/访问记录</div>
      <div class="recordCity-box flex-a-c">
        <div class="recordCity-flex flex" v-for="(item, index) in hostCities" :key="index">
          <div class="city-item" :class="cityName === item.name ? 'on' : ''" @click="RelatedSites(item.name, item.cityCode)">
            <span class="iconfont icon-service_n" v-if="cityName === item.name"></span>{{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="cityRecords">
      <div class="title siteTitle">
        所选城市<span>“{{ cityName }}”</span>的相关区县
      </div>
      <div class="recordCity-box site-list flex-a-c" v-if="hot.length > 0">
        <div class="recordCity-flex flex" v-for="(item, index) in hot" :key="index">
          <div class="city-item" @click="RelatedSites(item.city, item.cityCode)">{{ item.city }}</div>
        </div>
      </div>
      <van-empty description="暂无数据" v-else />
    </div>
    <van-index-bar>
      <block v-for="(item, index) in cityArr" :key="index">
        <van-index-anchor :index="item.firstWord" />
        <block v-for="(itemCity, cityIndex) in item.list" :key="cityIndex">
          <van-cell :title="itemCity.city" @click.stop="RelatedSites(itemCity.city, itemCity.cityCode)" />
        </block>
      </block>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: "CityList",
  props: {
    hot: Array,
    cityArr: Array,
    hostCities: Array,
    cityName: String
  },
  data() {
    return {
      letter: [], // 右侧数据
      letterShow: true, //是否显示右侧数据
      citiesList: []
    };
  },
  mounted() {
    // 获取配置文件的字母下标，右侧显示
  },
  updated() {
    // 触发更新，追踪数据，是否显示右侧的展示
  },
  methods: {
    RelatedSites(city, cityCode) {
      this.$router.replace(this.fun.getUrl("travelIndex", {}, { city: city, cityCode: cityCode ,localCity: city}));
      this.historyCity(city, cityCode);
    },
    historyCity(city, cityCode) {
      let arr = localStorage.getItem("historyList") || [];
      let searchArr = [];
      if (arr.length > 0) {
        arr = JSON.parse(arr);
        let len = arr.length;
        if (len >= 10) {
          arr.pop();
        }
      }
      arr.unshift({ name: city, cityCode: cityCode });
      searchArr = arr.filter((currentValue, currentIndex, selfArr) => {
        //去重
        return selfArr.findIndex(x => x.name === currentValue.name) === currentIndex;
      });
      localStorage.setItem("historyList", JSON.stringify(searchArr));
    }
  }
};
</script>
<style scoped>
.CityList ::v-deep .van-index-anchor {
  text-align: left;
  font-size: 1.125rem;
  color: #000;
}

.CityList ::v-deep .van-cell {
  border-bottom: 0.0625rem solid #f3f3f3;
}

.CityList ::v-deep .van-cell__title {
  text-align: left;
}

/* .CityList ::v-deep .van-index-bar__sidebar {
  right: 25%;
} */
.CityList ::v-deep .van-index-bar__index {
  font-size: 0.8125rem;
  color: #656161;
  margin-bottom: 0.3125rem;
}
</style>
<style lang="scss" scoped>
.cityRecords {
  margin-bottom: 0.625rem;

  .title {
    font-size: 0.8125rem;
    color: #000;
    margin: 0.9375rem 0 0.75rem 1rem;
    text-align: left;
  }

  .siteTitle {
    font-size: 0.8125rem;
    color: #afafaf;

    span {
      color: #363636;
    }
  }

  .recordCity-box {
    flex-wrap: wrap;
    background-color: #fff;
    padding: 0.375rem 0 0.375rem 1.0625rem;

    .recordCity-flex {
      // margin-right: 1.875rem;
      // flex: 0 0 33%;
      margin-right: 1rem;

      .city-item {
        padding: 0.625rem 1.5rem;
        border: 0.0625rem solid #c9c9c9;
        border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;
        margin-bottom: 0.5rem;
      }

      .on {
        border: 0.0625rem solid #f14e4e;
        color: #f14e4e;
        padding: 0.625rem 0.9375rem;

        span {
          color: #f14e4e;
        }
      }
    }
  }

  .site-list {
    padding: 0.9375rem 0 0.375rem 1.0625rem;
  }
}
</style>
